<template>
  <el-container>
    <el-header>
      <Header></Header>
    </el-header>
    <div
      style="height: 1px; background-color: grey; margin-top: 6px; opacity: 0.4"
    ></div>
    <el-main>
      <div class="allview">
        <div class="leftview">
          <div
            style="
              float: left;
              width: 100px;
              height: 60px;
              border-right: 1px solid lightgrey;
              border-bottom: 1px solid lightgrey;
            "
          >
            <el-button
              icon="el-icon-back"
              style="border: none; width: 100%; height: 100%"
              @click="back"
            ></el-button>
          </div>
          <div style="width: 750px; height: 750px; margin-left: 60px">
            <el-image
              style="margin-top: 80px; width: 70%; height: 70%"
              :src="goods.image"
            ></el-image>
          </div>
        </div>
        <div class="rightview">
          <div style="border-bottom: 1px solid lightgrey; height: 230px">
            <div class="goodstitle">
              <b>{{ goods.name }}</b>
            </div>
            <div class="goodsprice">￥{{ goods.price }}</div>
            <div style="margin-top: 20px">
              <el-button
                style="width: 340px; height: 50px"
                type="info"
                @click="addCart"
                >放入购物袋</el-button
              >
            </div>
          </div>
          <div style="">
            <div
              style="
                font-size: 20px;
                text-align: left;
                margin-left: 50px;
                margin-top: 30px;
              "
            >
              <b>品牌</b>
              <div style="font-size: 18px; margin-top: 30px; margin-left: 60px">
                {{ brand.name }}
              </div>
              <div style="margin-top: 30px; margin-left:35px;padding:0">
                <el-image
                  style="width: 100px; height: 100px"
                  :src="brand.logo"
                ></el-image>
              </div>
            </div>
            <div
              style="
                font-size: 20px;
                text-align: left;
                margin-left: 50px;
                margin-top: 30px;
              "
            >
              <b>规格</b>
              <div style="font-size: 18px; margin-top: 30px; margin-left: 60px">
                {{ goods.specifications }}
              </div>
            </div>
            <div
              style="
                font-size: 18px;
                text-align: left;
                margin-left: 50px;
                margin-top: 30px;
              "
            >
              <b>商品详情</b>
              <div style="font-size: 16px; margin-top: 30px; margin-left: 60px">
                {{ goods.detail }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import Header from "@/views/Header.vue";
import { getById } from "@/api/brand.js";
import { getItem } from "@/utils/localStorage.js";
import { add } from "@/api/cart.js";
export default {
  components: { Header },
  data() {
    return {
      goods: {},
      brandName: "",
      cart: {},
      brand: {},
    };
  },
  created() {
    this.goods = this.$route.query.goods;
    this.getBrandName();
  },
  methods: {
    back() {
      window.history.go(-1);
    },
    getBrandName() {
      getById(this.goods.brandId).then((res) => {
        this.brand = res.data.data;
      });
    },
    addCart() {
      let id = getItem("id");
      this.cart.userId = id;
      this.cart.goodsId = this.goods.id;
      add(this.cart).then((res) => {
        if (res.data.code == "0000") {
          this.$message.success("添加成功");
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.el-header {
  background-color: white;
  color: #333;
  text-align: center;
  line-height: 60px;
  padding-bottom: 20px;
}
.head {
  display: fixed;
  height: 60px;
  text-align: left;
}
.head > div {
  float: left;
}
.head img {
  float: left;
  padding: 0;
  margin: 0;
}
.el-main {
  background-color: white;
  color: #333;
  text-align: center;
  height: 700px;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}
.allview {
  display: flex;
  height: 100%;
}
.leftview {
  flex: 2;
  border-right: 1px solid lightgrey;
}
.rightview {
  flex: 1;
}
.goodstitle {
  font-size: 22px;
  margin-top: 60px;
  text-align: left;
  margin-left: 70px;
}
.goodsprice {
  font-size: 17px;
  text-align: left;
  margin-left: 70px;
  margin-top: 50px;
}
.wrapper {
  margin-top: px;
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: wrap;
}
.wrap-content {
  float: left;
  width: 33%;
  height: 120px;
  width: 380px;
  border-bottom: 1px solid lightgrey;
  margin-left: 30px;
  display: flex;
  align-items: center;
}
.el-drawer__body {
  overflow: scroll;
}

.el-drawer__container ::-webkit-scrollbar {
  display: none;
}
</style>